<?php
//======================================================================================
//
// Function: List data
//
// Programmer: JKJ
// Date : 2020-06-29
//
// Copyright Reeft A/S (c) - 2024
//======================================================================================
//
// http://www.openjs.com/scripts/events/keyboard_shortcuts/
// https://htmlcolorcodes.com/color-names/
// http://www.tl-it.nl/docs/files/jqplot-core-js.html#Series.yaxis
// http://www.jqplot.com/docs/files/jqplot-core-js.html
//
//
// Chart.js
// https://www.chartjs.org/docs/latest/axes/styling.html?h=grid
// https://jsfiddle.net/crabbly/kL68ey5z/ -- PDF save
// https://github.com/emn178/chartjs-plugin-labels - text on pie
// https://emn178.github.io/chartjs-plugin-labels/samples/demo/
//
// https://stackoverflow.com/questions/34479079/how-do-i-find-last-monday-using-momentjs
//
//======================================================================================
// General config
//======================================================================================
include "config/config.php";
//======================================================================================
// Get input
//======================================================================================
if (isset($_REQUEST["hub_webnam"])) {
$hub_webnam = $_REQUEST["hub_webnam"];
} else {
// $hub_webnam = 'ALFA_ORC_TAKT_MesPhaseProgress';
// $hub_webnam = 'ALFA_ORC_STOPTIME_GetWOList';
// $hub_webnam = 'HUB_CONECT';
// $hub_webnam = 'HUB_WEBTRN';
$hub_webnam = '';
}
if (isset($_REQUEST["fromdate"])) $fromDate = $_REQUEST["fromdate"];
else $fromDate = 0;
if (isset($_REQUEST["todate"])) $toDate = $_REQUEST["todate"];
else $toDate = 0;
if (isset($_REQUEST["input_hub_sertyp"])) $input_hub_sertyp = $_REQUEST["input_hub_sertyp"];
else {
$input_hub_sertyp = '';
}
//======================================================================================
// Check input
//======================================================================================
//======================================================================================
// Set header texts
//======================================================================================
//======================================================================================
// Check if user is logged in?
//======================================================================================
include "login_check.php";
//======================================================================================
// Get session variables
//======================================================================================
include "include/getsession.php";
$datahub_text0108 = 'Jan';
//======================================================================================
// Set language
//======================================================================================
include "include/set_language.php";
// Make kl lowercase
$datahub_text0108_lower = strtolower($datahub_text0108);
//======================================================================================
// Set defaults
//======================================================================================
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo $datahub_text0001 ?></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="REEFTvisual - Stoptime">
<meta name="author" content="REEFT A/S">
<link rel="icon" href="images/favicon.ico">
<link href="css/custom.css" rel="stylesheet">
<!-- Bootstrap / jQuery -->
<link href="css/bootstrap4.3.1/css/bootstrap.custom.min.css" rel="stylesheet">
<!--<link href="css/bootstrap4.3.1/css/themes/bootstrap.custom.min.css" rel="stylesheet">-->
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap4.3.1/css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/sticky-footer.css" rel="stylesheet" type="text/css">
<script src="css/fontawesome6.5.1/js/all.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-light.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-regular.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-solid.min.js"></script>
<script src="css/fontawesome6.5.1/js/sharp-thin.min.js"></script>
<!--<link href="css/bootstrap_animation/css/animate.css" rel="stylesheet" type="text/css">-->
<link href="css/bootstrap_animation/css/animate4/animate.css" rel="stylesheet" type="text/css">
<link href="javascript/chosen/chosen.css" rel="stylesheet" type="text/css">
<link href="javascript/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="javascript/jquery-2.2.4.min.js"></script>
<script src="css/bootstrap4.3.1/js/popper.js"></script>
<script src="css/bootstrap4.3.1/js/bootstrap.min.js"></script>
<script src="javascript/jquery-ui/jquery-ui.min.js"></script>
<script src="javascript/jquery.ui.touch-punch.min.js"></script>
<!--<script src="javascript/moment.min.js"></script>-->
<script src="javascript/moment-with-locales.min.js"></script>
<script src="javascript/moment-duration-format.min.js"></script>
<script src="javascript/number_format/jquery.number.min.js"></script>
<script src="javascript/jquery.scrollTo.min.js"></script>
<script src="javascript/bootstrap-datetimepicker4/build/js/tempusdominus-bootstrap-4.min.js"></script>
<link href="javascript/bootstrap-datetimepicker4/build/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet" type="text/css">
<!-- Data tables start -->
<link href="javascript/datatables.3.12/datatables.min.css" rel="stylesheet">
<script src="javascript/datatables.3.12/datatables.min.js"></script>
<!-- Data tables end -->
<script src="javascript/chosen/chosen.jquery.min.js" type="text/javascript"></script>
<script src="javascript/viewer-master/dist/viewer.min.js"></script>
<link href="javascript/viewer-master/dist/viewer.min.css" rel="stylesheet">
<script src="javascript/ajaxq/ajaxq.js"></script>
<link id="scrollUpTheme" rel="stylesheet" href="javascript/scrollup-master/dist/css/themes/image.css">
<script src="javascript/scrollup-master/dist/jquery.scrollUp.js"></script>
<script src="javascript/shortcut.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/2.9.3/chart.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/2.9.3/chartjs-adapter-moment.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/2.9.3/hammer.min.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/2.9.3/chartjs-plugin-zoom.min.js"></script>
<script type="text/javascript" src="javascript/chart.js_master/2.9.3/chartjs-plugin-annotation.min.js"></script>
<!--<script type="text/javascript" src="../javascript/chart.js_master/2.9.3/moment.js"></script>-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/2.0.1/chartjs-plugin-annotation.min.js"></script>-->
<script type="text/javascript" src="javascript/jspdf.min.js"></script>
<script src="javascript/_reeft_js/set_font_awesome_icon_type.js"></script>
<style>
.modal-xxl {
max-width: 80%;
}
.modal-xl {
max-width: 50%;
}
.image-style-custom
{
filter: drop-shadow(6px 6px 5px black)
}
.dropdown-item.active {
background-color: ForestGreen;
}
.btn-custom-wide {
height:60px;
width:210px;
}
.small-text {
font-size: 8px;
}
.overflow-class {
width:99%;
height:650px;
/*max-height: calc(100vh - 283px);*/
overflow-y: scroll;
overflow-x: scroll;
}
</style>
<script language="JavaScript">
//=============================================================================
// Globals
//=============================================================================
$(function () {
$.scrollUp({
scrollName: 'scrollUp', // Element ID
//topDistance: '1800', // Distance from top before showing element (px)
//topSpeed: 300, // Speed back to top (ms)
scrollDistance: '300', // Distance from top before showing element (px)
scrollSpeed: 300, // Speed back to top (ms)
animation: 'fade', // Fade, slide, none
animationInSpeed: 200, // Animation in speed (ms)
animationOutSpeed: 200, // Animation out speed (ms)
scrollText: false, //'Scroll to top', // Text for element
activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
});
});
load = 0;
//-----------------------------------------------------------------------------------------
// Input params
//-----------------------------------------------------------------------------------------
var global_fromDate = '<?php echo $fromDate ?>';
var global_toDate = '<?php echo $toDate ?>';
var firstTime = 0;
var GLOBAL_HUB_NAM = '<?php echo $hub_webnam ?>'
var GLOBAL_NUMBER_OF_CALLS = 0;
var GLOBAL_LOOP_VALUE = 100;
var GLOBAL_HUB_COUNT = 0;
var GLOBAL_MANUAL_FROM_TO_DATE = 0;
var GLOBAL_CHART_STEP_SIZE = 20;
var GLOBAL_DASHBOARD_MIN_VALUE = 0;
var GLOBAL_DASHBOARD_MAX_VALUE = 0;
var GLOBAL_DASHBOARD_UPDATE_INTERVAL = 10000;
var datahub_text0031a = 'Next update in'
var visual_secs_text = 'seconds'.toLowerCase();
var visual_sec_text = 'second'.toLowerCase();
var global_sertyp = '<?php echo $input_hub_sertyp ?>'
if ( global_sertyp == '' ) {
global_sertyp = '*ALL';
}
//-----------------------------------------------------------------------------------------
//=============================================================================
// 1 = Debug is active / 0 = Debug is NOT active
// All debug does is setting the from/to date to a specefic interval
//=============================================================================
var global_debug = 0;
var global_debug_from_date = '2023-08-03 07:00:00';
var global_debug_to_date = '2023-08-03 09:00:00';
//=============================================================================
//=============================================================================
// Set a base date (now) - always start with 00 seconds
//=============================================================================
var baseSec = moment().format("ss");
var global_baseDate = moment().add(0, 'hours').format("YYYY-MM-DD") + ' ' + moment().subtract(baseSec,'seconds').add(0, 'hours').format("HH:mm") + ':00';
//=============================================================================
// Used to set "from-date" on chart (wrk_from_date)
//=============================================================================
var global_subtract_value = 20;
var global_time_unit = 'minutes';
//=============================================================================
//=============================================================================
// Misc chart setup
//=============================================================================
var DFT_DISPLAY_PARETO_ON_BAR_CHART = 'N';
var DFT_DISPLAY_PARETO_ON_BAR_CHART = 'Y';
var DFT_DISPLAY_TICKS_ON_RIGHT_SIDE_BAR_CHART_FOR_TIME = 'Y';
var DFT_DISPLAY_LABLES_ON_PARETO_CHART_ON_BAR_CHART = 'Y';
if ( DFT_DISPLAY_PARETO_ON_BAR_CHART == 'Y' ) {
var displayPareto = true;
} else {
var displayPareto = false;
}
if ( DFT_DISPLAY_LABLES_ON_PARETO_CHART_ON_BAR_CHART == 'Y' ) {
var dftDisplayLablesOnParetoChartOnBarChart = true;
} else {
var dftDisplayLablesOnParetoChartOnBarChart = false;
}
if ( DFT_DISPLAY_TICKS_ON_RIGHT_SIDE_BAR_CHART_FOR_TIME == 'Y' ) {
var dftDisplayTicksOnRightSideBarChartForTime = true;
} else {
var dftDisplayTicksOnRightSideBarChartForTime = false;
}
//-----------------------------------------------------------------------------------------
// Reset chart objects
//-----------------------------------------------------------------------------------------
var chart_bar = null;
var chartPDFname = null;
var chartPDFname = GLOBAL_HUB_NAM;
//-----------------------------------------------------------------------------------------
// Move PHP arrays to javascript
//-----------------------------------------------------------------------------------------
var DFT_CANVAS_HEIGHT = '<?php echo $DFT_CANVAS_HEIGHT; ?>';
var DFT_DURATIONTIME = <?php echo $DFT_DURATIONTIME; ?>;
var DFT_PIE_TITLE_HEADER_DISPLAY = '<?php echo $DFT_PIE_TITLE_HEADER_DISPLAY; ?>';
var DFT_LEGEND_POSITION_DISPLAY = '<?php echo $DFT_LEGEND_POSITION_DISPLAY; ?>';
var DFT_LEGEND_POSITION = '<?php echo $DFT_LEGEND_POSITION; ?>';
var GLOBAL_DASHBOARD_LABEL_TEXT = '';
var GLOBAL_DASHBOARD_LABEL_TEXT_FILE = '';
var HEADER_TEXT = '';
var HEADER_TEXT_FILE = '';
var GLOBAL_CHART_STEP_SIZE = 20;
var GLOBAL_DASHBOARD_MIN_VALUE = 0;
var GLOBAL_DASHBOARD_MAX_VALUE = 0;
var DFT_SHOW_NEXT_UPDATE_INFO = 'Y';
var DFT_SHOW_NEXT_UPDATE_INFO_SHOW_ICON_ON_UPDATE = 'N';
var DFT_SHOW_NEXT_UPDATE_INFO_SHOW_ICON_ON_UPDATE_ICON_TO_SHOW = '<i style="color:CornflowerBlue" class="fa-solid fa-1x fa-star fa-spin"></i>';
//-----------------------------------------------------------------------------------------
// Msic chart setup
//-----------------------------------------------------------------------------------------
var globalbarData = null;
var globalbarData1 = null;
var globalbarColor = null;
var globalbarLabelText = null;
//-----------------------------------------------------------------------------------------
// General chart settings - also look in ready for more settings and hiding
//-----------------------------------------------------------------------------------------
durationTime = 2000;
pie_title_header_display = true;
legend_position = 'top';
legend_position_display = true;
//-----------------------------------------------------------------------------------------
var pieData = null;
var pieColor = null;
var pieToolTip = null;
var maxValueBar = 0;
//=============================================================================
// Get data for line 1
//=============================================================================
function getDataLineBurner( get_data_button_pressed )
{
$('#get-data-button-pressed').val( get_data_button_pressed );
// Manuel from/to date to be used
if ( $('#current-update-status').val() == '*PAUSE-UPDATE' )
{
// global_debug = 1;
// global_debug_from_date = show_from_date_time;
// global_debug_to_date = show_to_date_time;
// $('#input-base-date').val( show_from_date_time );
// $('#show-from-date-time').val( show_from_date_time );
// $('#show-to-date-time').val( show_to_date_time );
// $('#show-to-date-time-real').val( show_to_date_time );
// chart_border_max_to_date = show_from_date_time;
// chart_border_max_from_date = show_to_date_time
GLOBAL_MANUAL_FROM_TO_DATE = 1;
firstTime = 0;
// updateChartLine();
// return;
}
setDefaultFromToDate();
getDataLine('N');
}
//=============================================================================
// Get data
//=============================================================================
// function getData( dashboard_webservice, overrule_auto_update )
// {
// //console.log('getData');
// firstTime = 0;
// getDataLine( dashboard_webservice, overrule_auto_update );
// }
//=============================================================================
// Get data for line 1
//=============================================================================
function getDataLine( dashboard_webservice, overrule_auto_update )
{
$('#downloadPdf').removeClass('d-none');
// Show progress indicator
//$('#progress-indicator').removeClass('bg-light').addClass('bg-success');
//$('#progress-indicator').html('<i class="fa-sharp fa-light fa-loader fa-spin fa-spin-reverse"></i>');
$('#icon-circle-number-dot').removeClass('text-dark').addClass('text-success');
// Add to counter and save
GLOBAL_NUMBER_OF_CALLS++;
$('#number-of-calls').val( GLOBAL_NUMBER_OF_CALLS );
$('#info-modal-number-of-calls').html( GLOBAL_NUMBER_OF_CALLS );
if ( GLOBAL_NUMBER_OF_CALLS >= GLOBAL_LOOP_VALUE ) {
setDefaultFromToDate();
GLOBAL_NUMBER_OF_CALLS = 0;
}
var dashboard_webservice = dashboard_webservice;
var fetch_entries = 50;
//=============================================================================
// Move chart - move only "to" point to make chart look good
// The from point will be move after 100 data gets
//=============================================================================
chart_border_max_from_date = $('#show-from-date-time').val();
chart_border_max_to_date = $('#show-to-date-time').val();
sec_to_add = 1;
if ( GLOBAL_MANUAL_FROM_TO_DATE != 1 ) {
sec_to_add = 60 - moment().format('ss');
chart_border_max_to_date = moment().add( sec_to_add, 'seconds').format('YYYY-MM-DD HH:mm:ss');
chart_border_max_to_date_real = moment().add( 0, 'seconds').format('YYYY-MM-DD HH:mm:ss');
} else {
chart_border_max_to_date_real = moment().add( 0, 'seconds').format('YYYY-MM-DD HH:mm:ss');
}
// alert(chart_border_max_from_date)
// alert(chart_border_max_to_date)
// Set debug
if ( global_debug == 1) {
chart_border_max_to_date = global_debug_to_date;
}
$('#show-to-date-time').val( chart_border_max_to_date );
$('#show-to-date-time-real').val( chart_border_max_to_date_real );
$('#sec-to-add').val( sec_to_add );
var show_from_date_time = $('#show-from-date-time').val();
var show_to_date_time = $('#show-to-date-time').val();
// Split from date / time
var ary_wrk_date = show_from_date_time.split(' ');
var werbservice_fromdate = ary_wrk_date[0];
var werbservice_fromtime = ary_wrk_date[1];
// Split to date / time
var ary_wrk_date = show_to_date_time.split(' ');
var werbservice_todate = ary_wrk_date[0];
var werbservice_totime = ary_wrk_date[1];
// Assuming you have two timestamps in string format
const timestamp1 = show_from_date_time;
const timestamp2 = show_to_date_time;
// Create moment objects from the timestamps
const moment1 = moment(timestamp1);
const moment2 = moment(timestamp2);
// Calculate the difference in hours
const hoursDiff = moment2.diff(moment1, 'hours');
// + '&to_date=' + show_to_date_time
// Create param list
parmData = '&hub_webnam=' + '<?php echo $hub_webnam ?>'
+ '&fromdate=' + werbservice_fromdate
+ '&fromtime=' + werbservice_fromtime
+ '&todate=' + werbservice_todate
+ '&totime=' + werbservice_totime
+ '&get_detail=' + 'Y'
+ '&get_total=' + 'Y'
+ '&rpyPageSize=' + '5250'
;
//alert(parmData)
$.ajax({
url: "HUB_WEBTRN_maintain_get.php",
type: "GET",
data: parmData,
dataType: "json",
cache: false,
beforeSend: function( xhr ) {
}
})
.done(function( jsonData ) {
// Header
var returnCode = jsonData.header.returnCode;
var returnMsg = jsonData.header.returnMsg;
var entries_found = jsonData.header.entries_found;
var table_name_to_use = jsonData.header.table_name_to_use;
var response_sec = jsonData.header.response_sec;
var min_HUB_SECOND = jsonData.header.min_HUB_SECOND;
var max_HUB_SECOND = jsonData.header.max_HUB_SECOND;
var min_HUB_TIMSTP = jsonData.header.min_HUB_TIMSTP;
var max_HUB_TIMSTP = jsonData.header.max_HUB_TIMSTP;
GLOBAL_HUB_COUNT = jsonData.header.HUB_COUNT;
GLOBAL_DASHBOARD_MIN_VALUE = jsonData.header.HUB_CHRMIN;
GLOBAL_DASHBOARD_MAX_VALUE = jsonData.header.HUB_CHRMAX;
GLOBAL_DASHBOARD_HUB_DESCP1 = jsonData.header.HUB_DESCP1;
GLOBAL_DASHBOARD_HUB_DESCP2 = jsonData.header.HUB_DESCP2;
GLOBAL_DASHBOARD_HUB_DBGVAL = jsonData.header.HUB_DBGVAL;
GLOBAL_AVG_HUB_TIME_S = jsonData.header.avg_HUB_TIME_S;
GLOBAL_PCT_SUCCESS = jsonData.header.total_PCT_SUCCESS ;
GLOBAL_PCT_ERROR = jsonData.header.total_PCT_ERROR ;
GLOBAL_TOTAL_ENTRIES = jsonData.header.total_ENTRIES ;
//=================================================================
// Update info modal
//=================================================================
$('#hub_count-text').html('<?php echo $datahub_text0147 ?>: ' + GLOBAL_HUB_COUNT );
$('#response-time-text').html( response_sec );
//=================================================================
if ( entries_found == 0 ) {
dashboard_stamp_local = moment().add( 0, 'minutes').format('YYYY-MM-DD HH:mm:ss');
}
// define chart arrays
data_data = [];
extra_data = [];
//=============================================================================
// Get data for the chart
//=============================================================================
var HTMLline01 = '<table>';
$.each( jsonData.data, function( index, object ){
dashboard_stamp = object.HUB_TIMSTP;
dashboard_stamp_local = object.HUB_TIMSTP;
var dashboard_webservice = object.HUB_WEBNAM;
var dashboard_value = object.HUB_SECOND;
var dashboard_text = object.HUB_WEBNAM;
var dashboard_comment = object.HUB_RPYTXT;
var dashboard_HUB_RPYCOD = object.HUB_RPYCOD ;
var color = '';
dashboard_min_value = GLOBAL_DASHBOARD_MIN_VALUE;
dashboard_max_value = GLOBAL_DASHBOARD_MAX_VALUE;
// Setup arrays
data_data.push({x: dashboard_stamp_local, y: dashboard_value});
extra_data.push({dashboard_stamp_local,dashboard_webservice,dashboard_value,dashboard_text,dashboard_comment,dashboard_min_value,dashboard_max_value,GLOBAL_DASHBOARD_HUB_DESCP1,GLOBAL_DASHBOARD_HUB_DESCP2,dashboard_HUB_RPYCOD});
HTMLline01 += '<tr>'
+ '<td class="text-left">'
+ dashboard_stamp
+ '</td>'
+ '<td class="text-left">'
+ dashboard_webservice
+ '</td>'
+ '<td class="text-center">'
+ dashboard_value
+ '</td>'
+ '<td>'
+ dashboard_comment
+ '</td>'
+ '</tr>'
;
});
HTMLline01 += '</table>'
//=============================================================================
// Create / Update chart
//=============================================================================
if ( firstTime == 0 ) {
createChartLine('Y'); // Create chart
} else {
updateChartLine(); // Update chart
}
// Set flag
firstTime = 1;
//=============================================================================
//-----------------------------------------------------------------------
// Show next update text?
//-----------------------------------------------------------------------
if ( DFT_SHOW_NEXT_UPDATE_INFO == 'Y' ) {
$('.badge-pseodu-class-next-update-info').removeClass('d-none');
} else {
$('.badge-pseodu-class-next-update-info').addClass('d-none');
}
})
.always(function( jsonData ) {
//console.log('I am always..');
// Remove progress indicator
//$('#progress-indicator').removeClass('bg-success').addClass('bg-light');
//$('#progress-indicator').removeClass('bg-success').addClass('bg-light');
$('#icon-circle-number-dot').addClass('text-dark').removeClass('text-success');
if ( $('#current-update-status').val() == '*PAUSE-UPDATE' )
{
// Scroll
if ( $('#get-data-button-pressed').val() == '1' ) {
$('#date-confirm-message').html('Data hentet...');
scrollToSomething('chart-wrapper');
}
// Export
if ( $('#get-data-button-pressed').val() == '2' ) {
$('#button-export-chart-data').click();
}
$('#select-from-date').focus();
setTimeout(function(){
$('#date-confirm-message').html(' ');
}, 2000);
}
})
.fail(function( xhr, ajaxOptions, thrownError ) {
console.log('I am failed..');
console.log( xhr );
});
}
//=============================================================================
// Create chart Line 1
//=============================================================================
function createChartLine( adjustMe )
{
// Get some dates
$HEADER_FROM_DATE = $('#show-from-date-time').val();
$HEADER_TO_DATE = $('#show-to-date-time').val();
// Set chart header text
if ( GLOBAL_DASHBOARD_HUB_DESCP1.trim() == '' ) {
this_is_a_hypen = '';
} else {
this_is_a_hypen = ' - ';
}
HEADER_TEXT = GLOBAL_HUB_NAM + this_is_a_hypen + GLOBAL_DASHBOARD_HUB_DESCP1.trim();
HEADER_TEXT_DATE = $HEADER_FROM_DATE + ' - ' + $HEADER_TO_DATE;
HEADER_TEXT_FILE = GLOBAL_HUB_NAM;
GLOBAL_DASHBOARD_LABEL_TEXT = '( min: ' + GLOBAL_DASHBOARD_MIN_VALUE + ' sec / max: ' + GLOBAL_DASHBOARD_MAX_VALUE + ' sec / omit > ' + GLOBAL_DASHBOARD_HUB_DBGVAL + ')';
GLOBAL_DASHBOARD_LABEL_TEXT_FILE = '_min_' + GLOBAL_DASHBOARD_MIN_VALUE + '_sec___max_' + GLOBAL_DASHBOARD_MAX_VALUE + '_sec_';
if ( adjustMe != 'N' ) {
adjustChart();
}
//console.log(adjustMe + ' ' + chart_border_max_from_date + ' ' + chart_border_max_to_date);
// Get the canvas element
var canvas = document.getElementById('chart_01_id');
// Destroy all existing chart instances
Chart.helpers.each(Chart.instances, function (instance) {
instance.destroy();
});
const img = new Image(16, 16);
img.src = 'images/mini_reeft.png';
const data = {
datasets: [{
fill: false,
label: GLOBAL_DASHBOARD_LABEL_TEXT,
data: data_data,
borderWidth: 2,
borderColor: 'black', // Set line color to red
//pointBackgroundColor: 'blue', // Set point color to purple
// pointBorderColor: 'blue' // Set point border color to purple
}]
}
const footer = (tooltipItems) => {
// console.log(tooltipItems)
//console.log(extra_data)
// Get the index in order to find extra data
let idx = tooltipItems[0].dataIndex
// console.log(idx)
// Now get the extra data from the array object created in getDataLine
let dashboard_stamp_local = extra_data[idx].dashboard_stamp_local
let dashboard_text = extra_data[idx].dashboard_text
let dashboard_webservice = extra_data[idx].dashboard_webservice
let dashboard_comment = extra_data[idx].dashboard_comment
let dashboard_min_value = extra_data[idx].dashboard_min_value
let dashboard_max_value = extra_data[idx].dashboard_max_value
let dashboard_GLOBAL_DASHBOARD_HUB_DESCP1 = extra_data[idx].GLOBAL_DASHBOARD_HUB_DESCP1
let dashboard_GLOBAL_DASHBOARD_HUB_DESCP2 = extra_data[idx].GLOBAL_DASHBOARD_HUB_DESCP2
let dashboard_HUB_RPYCOD = extra_data[idx].dashboard_HUB_RPYCOD
//let sum = 0;
let hhh = 'Webservice: ' + dashboard_webservice + "\n"
+ 'Comment 1: ' + dashboard_GLOBAL_DASHBOARD_HUB_DESCP1 + "\n"
+ 'Comment 2: ' + dashboard_GLOBAL_DASHBOARD_HUB_DESCP2 + "\n"
+ 'Comment 3: ' + dashboard_comment + "\n"
+ 'Comment 4: ' + dashboard_HUB_RPYCOD + "\n"
+ 'Min value: ' + dashboard_min_value + "\n"
+ 'Max value: ' + dashboard_max_value + "\n"
;
return hhh;
// tooltipItems.forEach(function(tooltipItem) {
// sum += tooltipItem.parsed.y;
// });
// return 'Sum: ' + sum;
};
// console.log(chart_border_max_from_date);
// console.log(chart_border_max_to_date);
$('#some-info-2').html(chart_aspectRatio);
//var ctx = document.getElementById('chart_01_id').getContext('2d');
var ctx = canvas.getContext('2d');
myChart = new Chart(ctx, {
type: 'line',
data: data,
options: {
responsive: true,
maintainAspectRatio: true,
aspectRatio: chart_aspectRatio,
onClick: function (event, elements) {
if (elements.length > 0) {
// var index = elements[0].index;
// // Get the data point that was clicked
// var value1 = myChart.data.datasets[0].data[index].x;
// var value2 = myChart.data.datasets[0].data[index].y;
// var modal_label = myChart.data.datasets[0].label;
// // Get pk value from the tool-tip "bubble"
// var modal_pk_comment = event.chart.tooltip.footer[1];
// var modal_pk = event.chart.tooltip.footer[3];
// var modal_pk_bookmark = event.chart.tooltip.footer[4];
// var modal_pk_image = event.chart.tooltip.footer[5];
// // Split because the pk is in the form pk: value
// var ary_pk = modal_pk.split(' ');
// myPK = ary_pk[1];
// var ary_wrk = modal_pk_comment.split(':');
// myPK_comment = ary_wrk[1].trim();
// var ary_wrk = modal_pk_bookmark.split(':');
// myPK_bookmark = ary_wrk[1].trim();
// console.log('modal:' + myPK_bookmark)
// if ( myPK_bookmark == '<?php echo $datahub_YES ?>' ) {
// myPK_bookmark = 'Y'
// }
// if ( myPK_bookmark == '<?php echo $datahub_NO ?>' ) {
// myPK_bookmark = 'N'
// }
// console.log('modal:' + myPK_bookmark)
// var ary_wrk = modal_pk_image.split(':');
// myPK_image = ary_wrk[1].trim();
// // Show modal
// $('#data-change-modal-rowIndex').val('');
// changeComment(myPK, myPK_comment, '*CHART_MODE', myPK_bookmark, myPK_image)
}
},
elements: {
point: {
radius: function(context) {
var index = context.dataIndex;
if ( index != undefined ) {
var nnn = extra_data[index].dashboard_min_value
if ( nnn == 'Y' ) {
return 8
}
}
return 5;
},
pointStyle: 'rectRounded', // Set the desired point style
backgroundColor: function(context) {
// var index = context.dataIndex;
// var value = context.dataset.data[index];
// if (index === context.dataset.data.length - 1) {
// return 'DarkOrange'; // Set color to forestgreen for the last data point
// }
// if (index === context.dataset.data.length - 2) {
// return 'lightgreen'; // Set color to lightgreen for the last data point
// }
var index = context.dataIndex;
if ( index != undefined ) {
var value = extra_data[index].dashboard_value
var min = extra_data[index].dashboard_min_value
var max = extra_data[index].dashboard_max_value
if ( parseFloat(value) > parseFloat(max) ) {
return 'Red'; // Set color to lightgreen for the last data point
}
if ( parseFloat(value) < parseFloat(min) ) {
return 'Green'; // Set color to lightgreen for the last data point
}
// if ( nnn == 'Y' ) {
// // console.log(nnn + ' ' + index)
// // console.log(extra_data)
// } else {
// console.log('Noting')
// }
}
return 'blue'; // Set color to blue for other data points
},
}
},
scales: {
y: {
afterDataLimits: function(axis) {
},
beforeDataLimits: function(axis) {
},
beginAtZero: true,
title: {
display: true,
text: '<?php echo $datahub_secs_text ?>'
},
display: true,
grid: {
display: true
}
},
x: {
type: 'time',
time: {
parser: 'YYYY-MM-DD HH:mm:ss',
unit: 'second',
tooltipFormat:'YYYY-MM-DD HH:mm:ss',
displayFormats: {
'minute': 'YYYY-MM-DD HH:mm:ss',
'second': 'YYYY-MM-DD HH:mm:ss',
'millisecond':'HH:mm:ss',
'hour': 'HH:mm:ss',
'day': 'HH:mm:ss',
'week': 'HH:mm:ss',
'month': 'HH:mm:ss',
'quarter': 'HH:mm:ss',
'year': 'HH:mm:ss'
},
//stepSize: 120
stepSize: GLOBAL_CHART_STEP_SIZE
},
min: chart_border_max_from_date,
max: chart_border_max_to_date,
reverse: false,
grid: {
display: true
}
}
},
plugins: {
title: {
display: true,
//text: [HEADER_TEXT + ' ' + GLOBAL_DASHBOARD_LABEL_TEXT ], // One line
text: [HEADER_TEXT , HEADER_TEXT_DATE ], // If you want a line break create an array ['text','text1'] instead
color: 'black',
position: 'top',
align: 'center',
font: {
size: 25,
style: 'normal',
weight: 'bold'
},
padding: {
top: 5,
bottom: 5
}
},
subtitle: {
display: true,
text: GLOBAL_DASHBOARD_LABEL_TEXT,
color: 'black',
font: {
size: 20,
style: 'normal',
weight: 'bold'
},
padding: {
top: 5,
bottom: 15
}
},
annotation: {
annotations: [
{
type: 'line',
mode: 'horizontal',
scaleID: 'y',
value: GLOBAL_DASHBOARD_MIN_VALUE, // Specify the minimum value
borderColor: 'tomato',
borderWidth: 2,
borderDash: [4, 5], // Set the line to dashed
label: {
enabled: true,
position: 'left',
content: 'Min Value' // Optional label for the line
}
},
{
type: 'line',
mode: 'horizontal',
scaleID: 'y',
value: GLOBAL_DASHBOARD_MAX_VALUE, // Specify the maximum value
borderColor: 'tomato',
borderWidth: 2,
borderDash: [4, 5], // Set the line to dashed
label: {
enabled: true,
position: 'right',
content: 'Max Value' // Optional label for the line
}
}
]
},
legend: {
display: false,
labels: {
color: 'black'
}
},
tooltip: {
callbacks: {
footer: footer,
}
},
zoom: {
pan:
{
enabled: true,
mode: 'xy',
//modifierKey: 'ctrl',
// overScaleMode: 'xy',
// Function called while the user is panning
onPan: function({chart}) {
//console.log('I m panning!!!');
pauseUpdate();
},
// Function called once panning is completed
onPanComplete: function({chart}) {
//console.log('I was panned!!!');
}
},
zoom: {
wheel: {
enabled: true,
modifierKey: 'ctrl'
},
// Function called while the user is zooming
onZoom: function({chart})
{
//console.log('Im zooming!!!');
pauseUpdate();
},
// Function called once zooming is completed
onZoomComplete: function({chart})
{
//console.log('I was zoomed!!!');
}
},
pinch: {
enabled: true
},
mode: 'x'
}
}
}
});
// Debug
chart_w = $('#chart_01_id').width();
chart_h = $('#chart_01_id').height();
$('#some-info').text(chart_w + ' ' + chart_w);
}
//=============================================================================
// Set from/to date
//=============================================================================
function toggleFromToDate()
{
var select_from_date = moment().subtract(2, 'hour').format("YYYY-MM-DD");
var select_from_time = moment().subtract(4, 'hour').format("HH:mm:ss");
var select_to_date = moment().add(10, 'minutes').format("YYYY-MM-DD");
var select_to_time = moment().add(10, 'minutes').format("HH:mm:ss");
//console.log(select_from_date + ' ' + select_from_time)
$('#select-from-date').val( select_from_date ).focus();
$('#select-from-time').val( select_from_time );
$('#select-to-date').val( select_to_date );
$('#select-to-time').val( select_to_time );
if ( $('#from-to-date-wrapper').hasClass('d-none') ) {
$('#from-to-date-wrapper').removeClass('d-none');
$('#button-toggle-from-to-date').addClass('d-none');
// Place cursor
$('#select-from-date').focus();
pauseUpdate();
} else {
$('#from-to-date-wrapper').addClass('d-none');
unPauseUpdate();
}
}
//=============================================================================
// Adjust chart - use aspectRatio to control it instead of mugging around wiht
// the canvas as it works like shite
//=============================================================================
function adjustChart()
{
var w_width = $(window).width();
var w_height = $(window).height();
var v_value = 1600;
var v_value1 = 1000;
var v_value2 = 800;
var base_chart_aspectRatio = 3;
if ( w_width < v_value2 ) {
var base_chart_aspectRatio = 1;
$('#some-info-1').html(w_width + ' ' + w_height + ' <' + v_value + ' ' + base_chart_aspectRatio + ' (a)');
}
else if ( w_width < v_value1 ) {
var base_chart_aspectRatio = 2;
$('#some-info-1').html(w_width + ' ' + w_height + ' <' + v_value + ' ' + base_chart_aspectRatio + ' (a)');
}
else if ( w_width < v_value ) {
var base_chart_aspectRatio = 3;
$('#some-info-1').html(w_width + ' ' + w_height + ' <' + v_value + ' ' + base_chart_aspectRatio) + ' (b)';
}
else {
var base_chart_aspectRatio = 4;
$('#some-info-1').html(w_width + ' ' + w_height + ' >' + v_value + ' ' + base_chart_aspectRatio + ' (c)');
}
//$('#some-info-1').html(w_width + ' ' + w_height + ' >' + v_value + ' ' + base_chart_aspectRatio + ' (d)');
chart_aspectRatio = base_chart_aspectRatio;
}
//=============================================================================
// Create chart Line 1
//=============================================================================
function updateChartLine()
{
//console.log('Update chart' + moment() );
myChart.data.datasets[0].data = data_data;
myChart.options.aspectRatio = 1;
myChart.options.scales.x.min = chart_border_max_from_date;
myChart.options.scales.x.max = chart_border_max_to_date;
myChart.options.plugins.annotation.annotations[0].value = GLOBAL_DASHBOARD_MIN_VALUE;
myChart.options.plugins.annotation.annotations[1].value = GLOBAL_DASHBOARD_MAX_VALUE;
myChart.update();
}
//=============================================================================
// Pause update
//=============================================================================
function pauseUpdate()
{
$('#current-update-status').val('*PAUSE-UPDATE');
$('#current-update-status-wrapper').removeClass('d-none');
$('#next-update-info-wrapper').addClass('d-none');
$('#current-update-status-text').html('<?php echo $datahub_text0318 ?>');
}
//=============================================================================
// unpause update
//=============================================================================
function unPauseUpdate()
{
console.log('Unpause');
$('#current-update-status').val('*UPDATE');
$('#current-update-status-wrapper').addClass('d-none');
$('#next-update-info-wrapper').removeClass('d-none');
$('#current-update-status-text').html('');
$('#input-base-date').val( global_baseDate );
$('#show-to-date-time').val( global_baseDate );
GLOBAL_MANUAL_FROM_TO_DATE = 0;
GLOBAL_CHART_STEP_SIZE = 10;
firstTime = 0;
//setDefaultFromToDate();
// Reset chart
resetChart();
getDataLineBurner('0');
// Hide from/to date
$('#from-to-date-wrapper').addClass('d-none');
$('#button-toggle-from-to-date').removeClass('d-none');
}
//=============================================================================
// Set datatables
//=============================================================================
function setDataTablesReason()
{
$('#REEFTvisual_data').DataTable({
"responsive": true,
"fixedHeader": false,
"lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"iDisplayLength": 25,
"processing": true,
"dom": '<"toolbar">lfi<bottom>Bp<"clear">',
"order": [[ 1, "desc" ]],
"columnDefs": [
{
"targets": [ 3 ],
"visible": true,
"searchable": false,
"orderable": false
}
],
"language":
{
"sProcessing": "<?php echo $datahub_datatable_Processing ?>",
"sLengthMenu": "<?php echo $datahub_datatable_LengthMenu ?>",
"sZeroRecords": "<?php echo $datahub_datatable_ZeroRecords ?>",
"sInfo": "<?php echo $datahub_datatable_Info ?>",
"sInfoEmpty": "<?php echo $datahub_datatable_InfoEmpty ?>",
"sInfoFiltered": "<?php echo $datahub_datatable_InfoFiltered ?>",
"sInfoPostFix": "<?php echo $datahub_datatable_InfoPostFix ?>",
"sLoadingRecords": "<?php echo $datahub_datatable_Processing ?>",
"sSearch": "<?php echo $datahub_datatable_Search ?>",
"sUrl": "<?php echo $datahub_datatable_Url ?>",
"oPaginate": {
"sFirst": "<?php echo $datahub_datatable_First ?>",
"sPrevious": "<?php echo $datahub_datatable_Previous ?>",
"sNext": "<?php echo $datahub_datatable_Next ?>",
"sLast": "<?php echo $datahub_datatable_Last ?>"
}
},
"rowCallback": function(row, data, index)
{
},
"preDrawCallback": function(settings)
{
},
"initComplete": function ()
{
},
"buttons": [
{
title: 'REEFTvisual_data_PDF',
extend: 'pdf',
text: '<img src="images/pdf_logo.png" height="25"> PDF',
orientation: 'landscape',
exportOptions: {
modifier: {
page: 'all'
}
}
},
{
title: 'REEFTvisual_data_Excel',
extend: 'excel',
text: '<img src="images/microsoft_excel_logo.png" height="25"> Excel'
},
{
extend: 'copy',
text: '<img src="images/copy.png" height="25"> Copy to Clipboard'
}
]
});
// Set header
$('#REEFTvisual_data').append('<caption style="caption-side: top"><div class="text-center font-weight-bold">' + bar_title_header + '</div></caption>');
}
//=============================================================================
// Log off
//=============================================================================
function signoff()
{
window.location.href = "logout.php";
}
//=============================================================================
// Load page
//=============================================================================
function loadPage(url, p1, p2, p3)
{
window.location.href = url;
}
//=============================================================================
// Set default date
//=============================================================================
function setDefaultDate( defaultHours ) {
// Set default from/to date
default_fromDate = moment().subtract(defaultHours, 'hours').format("YYYY-MM-DD HH:mm");
$('#fromdate').datetimepicker('date', default_fromDate );
$('#fromdateX').addClass('animated pulse border border-danger rounded');
// After animation
$('#fromdateX').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function() {
$('#fromdateX').removeClass( 'animated pulse border border-danger rounded' );
}
);
default_toDate = moment().add(0, 'days').add(10, 'minutes').subtract(0, 'year').format("YYYY-MM-DD HH:mm");
$('#todate').datetimepicker('date', default_toDate );
$('#fromdate').datetimepicker('date', default_fromDate );
$('#fromdateX').addClass('animated pulse border border-danger rounded');
$('#todate').datetimepicker('date', default_toDate );
}
//=============================================================================
// Scroll to something
//=============================================================================
function scrollToSomething( target )
{
thisID = '#' + target;
$.scrollTo( thisID, 1000);
}
//=============================================================================
// Create PDF
//=============================================================================
function downloadPDF() {
// Get size of report page
var reportPageHeight = $('#canvas-wrapper').innerHeight();
var reportPageWidth = $('#canvas-wrapper').innerWidth();
console.log(reportPageHeight + ' ' + reportPageWidth);
// Create a new canvas object that we will populate with all other canvas objects
var pdfCanvas = $('<canvas />').attr({
id: "canvaspdf",
width: reportPageWidth,
height: reportPageHeight
});
// Keep track canvas position
var pdfctx = $(pdfCanvas)[0].getContext('2d');
var pdfctxX = 0;
var pdfctxY = 0;
var buffer = 100;
// For each chart.js chart
$("canvas").each(function(index) {
// Get the chart height/width
var canvasHeight = $(this).innerHeight();
var canvasWidth = $(this).innerWidth();
// Draw the chart into the new canvas
pdfctx.drawImage($(this)[0], pdfctxX, pdfctxY, canvasWidth, canvasHeight);
pdfctxX += canvasWidth + buffer;
// Our report page is in a grid pattern so replicate that in the new canvas
if (index % 2 === 1) {
pdfctxX = 0;
pdfctxY += canvasHeight + buffer;
}
});
// Create new pdf and add our new canvas as an image
var pdf = new jsPDF('l', 'pt', [reportPageWidth, reportPageHeight]);
pdf.addImage($(pdfCanvas)[0], 'PNG', 0, 0);
// download the pdf
pdf.save(chartPDFname);
}
//=============================================================================
// Set Default dates
//=============================================================================
function setDefaultFromToDate()
{
var baseDate = $('#show-to-date-time').val();
//=============================================================================
// From date - if global_debug = 1 - we are using the global debug dates
//=============================================================================
if ( global_debug == 1 ) {
$('#show-from-date-time').val( global_debug_from_date );
$('#show-to-date-time').val( global_debug_to_date );
$('#input-base-date').val( global_debug_from_date );
} else {
wrk_from_date = moment( baseDate ).subtract(global_subtract_value, global_time_unit).format("YYYY-MM-DD HH:mm:ss");
$('#show-from-date-time').val( wrk_from_date );
$('#input-base-date').val( wrk_from_date );
}
//alert(baseDate + ' ' + wrk_from_date + ' ' + wrk_from_date)
//alert(GLOBAL_MANUAL_FROM_TO_DATE)
//console.log('show_to_date_time: ' + GLOBAL_MANUAL_FROM_TO_DATE);
if ( GLOBAL_MANUAL_FROM_TO_DATE == 1 ) {
var select_from_date = $('#select-from-date').val();
var select_from_time = $('#select-from-time').val();
var select_to_date = $('#select-to-date').val();
var select_to_time = $('#select-to-time').val();
select_from_date_time = select_from_date + ' ' + select_from_time;
select_to_date_time = select_to_date + ' ' + select_to_time;
//alert(select_from_date_time)
$('#show-from-date-time').val( select_from_date_time );
$('#show-to-date-time').val( select_to_date_time );
$('#input-base-date').val( select_from_date_time );
// Assuming you have two timestamps in string format
const timestamp1 = select_from_date_time;
const timestamp2 = select_to_date_time;
// Create moment objects from the timestamps
const moment1 = moment(timestamp1);
const moment2 = moment(timestamp2);
// Calculate the difference in hours
const hoursDiff = moment2.diff(moment1, 'hours');
var step = hoursDiff / 20
step = parseInt(step);
if ( step < 10 ) {
step = 20;
}
console.log(hoursDiff + ' ' + step);
if ( hoursDiff > 1000 )
{
GLOBAL_CHART_STEP_SIZE = 1500;
}
else if ( hoursDiff > 500 )
{
GLOBAL_CHART_STEP_SIZE = 300;
}
else if ( hoursDiff > 24 )
{
GLOBAL_CHART_STEP_SIZE = 200;
} else {
GLOBAL_CHART_STEP_SIZE = 20;
}
GLOBAL_CHART_STEP_SIZE = step;
console.log('select_to_date_time: ' + GLOBAL_MANUAL_FROM_TO_DATE + ' ' + select_from_date_time + ' -- ' + select_to_date_time + ' ' + hoursDiff );
return;
}
// $('#info-modal-show-from-date-time').html( $('#show-from-date-time').val() );
// $('#info-modal-show-to-date-time').html( $('#show-to-date-time').val() );
//=============================================================================
// To date (Add 10 seconds for good ol' sake)
//=============================================================================
// wrk_to_date = moment( baseDate ).add(0, 'days').add(0, 'seconds').add(0, 'minutes').subtract(0, 'hours').format("YYYY-MM-DD HH:mm:ss");
// $('#show-to-date-time').val( wrk_to_date );
}
//=============================================================================
// Make first letter uppercase
//=============================================================================
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
//=============================================================================
// Reset messasge
//=============================================================================
function resetMessage()
{
$('#message-text').html('').removeClass('border border-danger rounded font-weight-bold mt-2 mb-1 p-2');
}
//=============================================================================
// Reset chart
//=============================================================================
function resetChart()
{
myChart.resetZoom();
}
//=============================================================================
// Full screen popup
//=============================================================================
function popUpCenter(url, p1, p2, p3)
{
var v1_w = screen.availWidth;
var v1_h = screen.availHeight;
if ( parseInt(v1_w) > 1800 ) {
v1_w = 1800;
v1_h = v1_h - 200;
v1_center = v1_w/0.8;
}
// Center popup as good as possible
var left = (screen.width - v1_w) / 2;
var top = (screen.height - v1_h) / 4;
var winname = 'win_' + url;
params = 'width='+v1_w;
params += ', height='+v1_h;
params += ', top=' + top + ', left=' + left;
params += ', fullscreen=yes';
params += ',scrollbars=1';
overview_win = window.open(url,winname, params);
if (window.focus) {overview_win.focus()}
return false;
}
//=============================================================================
// screen popup - center - bigger
//=============================================================================
function popUpCenterBig(url, p1, p2, p3)
{
var v1_w = screen.availWidth;
var v1_h = screen.availHeight;
// Get 25%
v1_w_pct = v1_w * 0.18;
v1_w_new = v1_w - v1_w_pct;
if ( v1_w_new < 1 ) {
v1_w_new = 1800;
}
v1_w = v1_w_new;
v1_h = v1_h - 200;
v1_center = v1_w/0.8;
// Center popup as good as possible
var left = (screen.width - v1_w) / 2;
var top = (screen.height - v1_h) / 4;
var winname = 'win_' + url;
params = 'width='+v1_w;
params += ', height='+v1_h;
params += ', top=' + top + ', left=' + left;
params += ', fullscreen=yes';
params += ',scrollbars=1';
// Create URL
url = url + '?webnam=' + p1 + '&input_hub_sertyp=' + p3;
if ( p2 == 'new-tab' ) {
overview_win = window.open(url,winname);
} else {
overview_win = window.open(url,winname, params);
}
if (window.focus) {overview_win.focus()}
return false;
}
//=============================================================================
// Set search word
//=============================================================================
function setSearchWord( input_search, input_goto, input_button_number, input_totalPages, input_count )
{
// Set webserver type
$('#input-HUB_SERTYP').val( input_search );
chart_bar.destroy();
}
//=============================================================================
// Show transcations
//=============================================================================
function showTranscations(url, p1, p2, p3)
{
var url = 'hub_webtrn_maintain.php';
var p1 = p1;
var p2 = 'new-win';
var p3 = '';
popUpCenterBig(url, p1, p2, p3);
}
//=============================================================================
// Save chart to table
//=============================================================================
function saveChartToTable()
{
console.time('A');
var table = $('#REEFTvisual_chart_data').DataTable();
table
.clear()
.search('')
.draw();
console.timeEnd('A');
// Set modal header
$('#chartDataModalLabel').html( $('#general-header-for-this-screen').html() ).addClass('h4');
console.time('B');
$.each( extra_data, function( index, object ){
let dashboard_webservice = extra_data[index].dashboard_webservice;
let dashboard_stamp_local = extra_data[index].dashboard_stamp_local;
let dashboard_value = extra_data[index].dashboard_value;
let dashboard_text = extra_data[index].dashboard_text;
let dashboard_type = extra_data[index].dashboard_type;
let dashboard_comment = extra_data[index].dashboard_comment;
let dashboard_HUB_RPYCOD = extra_data[index].dashboard_HUB_RPYCOD;
value_type = '';
if ( dashboard_HUB_RPYCOD == '' ) {
dashboard_HUB_RPYCOD = '*ERROR';
}
// Alles ist gut
value_type_text = '<div class="text-center"><i class="fa-regular fa-circle-check"></i></div>'
value_type = '<div class="d-none">ok</div>'
value_button = ''
value_button = ''
if ( dashboard_value < GLOBAL_DASHBOARD_MIN_VALUE )
{
value_type_text = '<div class="text-center"><i title="Low" class="text-success fa-regular fa-thumbs-up"></i></div>'
value_type = '<div class="d-none">low</div>'
}
if ( dashboard_value > GLOBAL_DASHBOARD_MAX_VALUE )
{
value_type_text = '<div class="text-center"><i title="High" class="text-danger fa-regular fa-thumbs-down"></i></div>'
value_type = '<div class="d-none">high</div>'
}
var table = $('#REEFTvisual_chart_data').DataTable();
var rowData = [dashboard_webservice, dashboard_stamp_local, dashboard_value, value_type_text + value_type,dashboard_comment,dashboard_HUB_RPYCOD];
table.row.add(rowData);
});
table.draw();
console.timeEnd('B');
console.time('C');
$('#modal-lightbulb').html('<i class="fa-duotone fa-lightbulb" style="--fa-primary-color: blue; --fa-secondary-color: black; --fa-secondary-opacity: 1.0"></i>');
// Hide search tip
$('#modal-search-tip').addClass('d-none');
$('#chartDataModal').modal('show');
$('#chartDataModal').on('shown.bs.modal', function () {
$('div.dataTables_filter input', table.table().container()).focus();
})
console.timeEnd('C');
console.time('D');
var table = $('#REEFTvisual_chart_data').DataTable();
$('#REEFTvisual_chart_data tbody').on( 'click', 'tr', function () {
rr = table.row( this ).index();
console.log(rr);
var data = table.row( this ).data();
//console.log(data);
$('#data-change-modal-rowIndex').val(rr);
});
// // Create the caption
// // Number of calls
// var m1 = $('#hub_count-text').text();
// var m2 = GLOBAL_AVG_HUB_TIME_S;
// var myCaption = m1
// + '<br>--'
// + 'Avg call time: ' + GLOBAL_AVG_HUB_TIME_S
// ;
// $('#REEFTvisual_chart_data caption').html( myCaption );
console.timeEnd('D');
}
//=============================================================================
// Set datatables - full chart
//=============================================================================
function setDataTablesFullChart()
{
DFT_EXPORT_TO_CSV = 'Y';
DFT_EXPORT_TO_CSV_FIELDSEPARATOR = ';';
$('#REEFTvisual_chart_data').DataTable({
"order": [[ 1, "desc" ]],
"columnDefs": [
{
"targets": [ 3 ],
"visible": true,
"searchable": true,
"orderable": false
}
],
pageLength: 10,
lengthChange: true,
layout: {
top1Start: [{
pageLength: {
menu: [5,10, 25, 50, 100, 250]
}
}],
top1End: [{
search: {
placeholder: '<?php echo $datahub_datatable_Search_text ?>',
processing: true
}
}],
topStart: {
info:{
}
},
topEnd: {
paging: {
buttons: 7,
firstLast: true,
boundaryNumbers: true,
}
},
bottomStart: {
buttons: [
{
extend: 'copyHtml5',
text: '<img src="images/copy.png" height="25"> Copy to Clipboard',
title: function(){
var myFileName = setFileNameAndTitle('*TITLE');
return myFileName;
},
exportOptions: {
// Fields to export (https://datatables.net/reference/button/csv#Examples)
columns: [0,1,2,3,4,5]
}
},
{
extend: 'excelHtml5',
filename: function(){
var myFileName = setFileNameAndTitle('*FILE');
return myFileName;
},
title: function(){
var myFileName = setFileNameAndTitle('*TITLE');
return myFileName;
},
text: '<img src="images/microsoft_excel_logo.png" height="25"> Excel',
exportOptions: {
// Fields to export (https://datatables.net/reference/button/csv#Examples)
columns: [0,1,2,3,4,5]
}
},
{
extend: 'pdfHtml5',
text: '<img src="images/pdf_logo.png" height="25"> PDF',
orientation: 'landscape',
filename: function(){
var myFileName = setFileNameAndTitle('*FILE');
return myFileName;
},
title: function(){
var myFileName = setFileNameAndTitle('*TITLE');
return myFileName;
},
exportOptions: {
// Fields to export (https://datatables.net/reference/button/csv#Examples)
columns: [0,1,2,3,4,5],
modifier: {
page: 'all'
}
}
}
]
},
bottomEnd: {
paging: {
buttons: 7,
firstLast: true,
boundaryNumbers: true
}
}
},
"language":
{
"decimal": ",",
"thousands": ".",
"emptyTable": "<?php echo $datahub_datatable_emptyTable ?>",
"info": "<?php echo $datahub_datatable_Info ?>",
"infoEmpty": "<?php echo $datahub_datatable_InfoEmpty ?>",
"InfoFiltered": "<?php echo $datahub_datatable_InfoFiltered ?>",
"infoPostFix": "",
"lengthMenu": "<?php echo $datahub_datatable_LengthMenu ?>",
"loadingRecords": "",
"processing": "<?php echo $datahub_datatable_Processing ?>",
"search": "<?php echo $datahub_datatable_Search ?>",
"zeroRecords": "<?php echo $datahub_datatable_ZeroRecords ?>",
"paginate":
{
"first": "<?php echo $datahub_datatable_First ?>",
"last": "<?php echo $datahub_datatable_Last ?>",
"next": "<?php echo $datahub_datatable_Next ?>",
"previous": "<?php echo $datahub_datatable_Previous ?>"
},
"aria": {
"orderable": "Order by this column",
"orderableReverse": "Reverse order this column"
}
},
"rowCallback": function(row, data, index)
{
},
"preDrawCallback": function(settings)
{
},
"initComplete": function ()
{
},
"buttons": [
{
extend: 'pdf',
title: 'REEFTvisual_chart_data_PDF ',
text: '<img src="images/pdf_logo.png" height="25"> PDF',
orientation: 'landscape',
filename: function(){
var myFileName = setFileNameAndTitle('*FILE');
return myFileName;
},
title: function(){
var myFileName = setFileNameAndTitle('*TITLE');
return myFileName;
},
exportOptions: {
columns: [0,1,2,3,4,5],
modifier: {
page: 'all'
}
}
},
{
extend: 'excel',
exportOptions: {
// Fields to export (https://datatables.net/reference/button/csv#Examples)
columns: [0,1,2,3,4,5]
},
filename: function(){
var myFileName = setFileNameAndTitle('*FILE');
return myFileName;
},
title: function(){
var myFileName = setFileNameAndTitle('*TITLE');
return myFileName;
},
text: '<img src="images/microsoft_excel_logo.png" height="25"> Excel'
},
{
extend: 'copy',
exportOptions: {
// Fields to export (https://datatables.net/reference/button/csv#Examples)
columns: [0,1,2,3,4,5]
},
text: '<img src="images/copy.png" height="25"> Copy to Clipboard'
},
{
extend: 'csv',
className: 'datatables_csv_button',
exportOptions: {
// Fields to export (https://datatables.net/reference/button/csv#Examples)
columns: [0,1,2,3,4,5]
},
bom: true,
header: true,
filename: function(){
var myFileName = setFileNameAndTitle('*FILE');
return myFileName;
},
fieldSeparator: DFT_EXPORT_TO_CSV_FIELDSEPARATOR,
text: '<img src="images/csv_logo.png" height="25"> CSV file'
}
]
});
// Export to CSV active?
// I have to reverse it due the nature of datatables
// Note the class name is added under the extend: 'csv'
if ( DFT_EXPORT_TO_CSV == 'N' ) {
$('.datatables_csv_button').addClass('d-none');
}
//$('.datatables_csv_button').addClass('d-none');
}
//=============================================================================
// Set file name and title
//=============================================================================
function setFileNameAndTitle( action ) {
var myTime = moment().format('DDMMYYYY_HHmmss');
if ( action == '*FILE' ) {
var myFileName = HEADER_TEXT_FILE + '_' + GLOBAL_DASHBOARD_LABEL_TEXT_FILE + '_' + myTime;
} else {
var myFileName = HEADER_TEXT
+ ' '
+ GLOBAL_DASHBOARD_LABEL_TEXT
+ ' / Avg call time: '
+ GLOBAL_AVG_HUB_TIME_S
+ ' / Success call: '
+ GLOBAL_PCT_SUCCESS
+ '% / Error call: '
+ GLOBAL_PCT_ERROR
+ '% / Total calls: '
+ GLOBAL_TOTAL_ENTRIES
;
}
return myFileName;
}
//=============================================================================
// Show search tip
//=============================================================================
function showSearchTip()
{
// Help text in modal table export
var datahub_text0314 = '<?php echo $datahub_text0314 ?>';
var datahub_text0315 = '<?php echo $datahub_text0315 ?>';
var datahub_text0316 = '<?php echo $datahub_text0316 ?>';
// min
datahub_text0314 = datahub_text0314.replace("%1",GLOBAL_DASHBOARD_MIN_VALUE );
// max
datahub_text0315 = datahub_text0315.replace("%1",GLOBAL_DASHBOARD_MAX_VALUE );
// range
datahub_text0316 = datahub_text0316.replace("%1",GLOBAL_DASHBOARD_MIN_VALUE );
datahub_text0316 = datahub_text0316.replace("%2",GLOBAL_DASHBOARD_MAX_VALUE );
$('#msg_datahub_text0314').html( datahub_text0314 );
$('#msg_datahub_text0315').html( datahub_text0315 );
$('#msg_datahub_text0316').html( datahub_text0316 );
// Save element in variable
var obj = $('#modal-search-tip');
if ( obj.hasClass('d-none') ) {
console.log('s1');
obj.removeClass('d-none');
const element = document.querySelector('#modal-search-tip');
element.classList.add('animate__animated', 'animate__backInDown');
element.addEventListener('animationend', () => {
obj.removeClass('animate__animated animate__backInDown');
$('#modal-lightbulb').html('<i class="fa-duotone fa-lightbulb-on" style="--fa-primary-color: blue; --fa-secondary-color: gold; --fa-secondary-opacity: 1.0"></i>');
obj.removeClass('d-none');
});
} else {
console.log('s2');
const element = document.querySelector('#modal-search-tip');
element.classList.add('animate__animated', 'animate__backOutUp');
element.addEventListener('animationend', () => {
obj.addClass('d-none');
obj.removeClass('animate__animated animate__backOutUp');
$('#modal-lightbulb').html('<i class="fa-duotone fa-lightbulb" style="--fa-primary-color: blue; --fa-secondary-color: black; --fa-secondary-opacity: 1.0"></i>');
});
}
}
//=============================================================================
// Set clock
//=============================================================================
function updateClock() {
$('#current-time').html(moment().format('DD-MM-YYYY HH:mm:ss'));
var current_update_status = $('#current-update-status').val();
if ( current_update_status == '*UPDATE')
{
//console.log('I am updating - ' + moment());
// Set interval and get data when nessecery - do this instead of setting a timer
var interval_workfield = $('#interval-counter').val();
var interval_workfield_base = $('#interval-counter-base').val();
// make it h:m:s
seconds = interval_workfield;
const hours = Math.floor(seconds / 3600);
const minutes = Math.floor((seconds % 3600) / 60);
const remainingSeconds = seconds % 60;
const formattedHours = String(hours).padStart(2, '0');
const formattedMinutes = String(minutes).padStart(2, '0');
const formattedSeconds = String(remainingSeconds).padStart(2, '0');
const formattedSecondss = remainingSeconds;
const formattedTime = formattedHours + ':' + formattedMinutes + ':' + formattedSeconds;
if ( interval_workfield_base < 60 ) {
// Making is so fvcking perfect...
if ( formattedSeconds == 1 ) {
visual_secs_text_text = visual_sec_text + ' ';
} else {
visual_secs_text_text = visual_secs_text;
}
var formattedTimeText = datahub_text0031a + ' ' + formattedSecondss + ' ' + visual_secs_text_text;
} else {
var formattedTimeText = datahub_text0031a + ' ' + formattedHours + ':' + formattedMinutes + ':' + formattedSeconds;
}
// Next counter
interval_workfield = parseInt(interval_workfield) - 1;
if ( interval_workfield == 0 ) {
$('#interval-counter').val( $('#interval-counter-base').val() );
// Show update icon
if ( DFT_SHOW_NEXT_UPDATE_INFO_SHOW_ICON_ON_UPDATE == 'Y') {
$('#interval-next-update-text').html( DFT_SHOW_NEXT_UPDATE_INFO_SHOW_ICON_ON_UPDATE_ICON_TO_SHOW);
} else {
$('#interval-next-update-text').html( ' ' );
}
//========================================================
// Get data - if wanted
//========================================================
if ( $('#current-update-status').val() == '*UPDATE' ) {
//console.log('Update ' + moment().format('DD-MM-YYYY HH:mm:ss'));
getDataLine('N');
} else {
console.log('No update ' + moment().format('DD-MM-YYYY HH:mm:ss'));
}
//========================================================
} else {
$('#interval-next-update-text').html( '' );
$('#interval-counter').val(interval_workfield);
}
$('#interval-next-update').html( formattedTimeText ).prop('title','Format: h:m:s -- seconds is: ' + interval_workfield);
} else {
//console.log('I am not updating - ' + moment());
}
}
//=============================================================================
// jQuery - Ready
//=============================================================================
$(document).ready(function()
{
$('#current-update-status').val('*UPDATE');
// Set webserver type
$('#input-HUB_SERTYP').val( global_sertyp );
$('#input-userid').html('');
$('#input-value-min').val(GLOBAL_DASHBOARD_MIN_VALUE);
$('#input-value-max').val(GLOBAL_DASHBOARD_MAX_VALUE);
$('#input-timer-value').val(GLOBAL_DASHBOARD_UPDATE_INTERVAL);
$('#input-loop-value').val( GLOBAL_LOOP_VALUE );
$('#info-modal-timer-value').html( GLOBAL_DASHBOARD_UPDATE_INTERVAL );
$('#info-modal-loop-value').html( GLOBAL_LOOP_VALUE );
var baseDate = global_baseDate;
$('#input-base-date').val( global_baseDate );
$('#show-to-date-time').val( global_baseDate );
//alert(global_baseDate);
// Get timer value
var input_timer_value = parseInt( $('#input-timer-value').val() );
if ( isNaN(input_timer_value) ) {
input_timer_value = 10000;
}
setDefaultFromToDate();
// Set size of canvas
$('#canvas-wrapper').css('height','650px');
// Set input fields
$('#fromdate').val('<?php echo $fromDate ?>');
$('#todate').val('<?php echo $toDate ?>');
//=============================================================================
// Set interval values and calculate to seconds/minutes
//=============================================================================
// Make it seconds
sec_calc = parseInt(GLOBAL_DASHBOARD_UPDATE_INTERVAL / 1000);
// Just in case - default 5 sec
if ( sec_calc < 1 ) {
sec_calc = 5;
}
// Make integer from float - just in case
sec_calc = parseInt(sec_calc);
// Update control fields
$('#interval-counter-base').val(sec_calc);
$('#interval-counter').val(sec_calc);
//=============================================================================
//-----------------------------------------------------------------------
// Start the clock
//-----------------------------------------------------------------------
updateClock();
setInterval(function() {
updateClock();
}, 1000);
//-----------------------------------------------------------------------
//-----------------------------------------------------------------------
// Set font awesome icon type
//-----------------------------------------------------------------------
// Value is from config/config.php
var iconType = '<?php echo $DFT_SET_FONT_AWESOME_ICON_TYPE ?>';
setFontAwesomeIconType( iconType );
//-----------------------------------------------------------------------
//-----------------------------------------------------------------------
// Get some chart data
//-----------------------------------------------------------------------
getDataLine('Y');
// Set short cuts
shortcut.add("Esc",function() {
//window.close();
});
// Export chart data
shortcut.add("F2",function() {
$('#button-export-chart-data').trigger('click');
});
// Register the plugin to all charts:
//Chart.register(ChartDataLabels);
setDataTablesFullChart();
});
// -->
</script>
</head>
<body>
<div class="container-fluid mt-2 pl-3 pr-3">
<input class="d-none" type="text" id="reference-code-input">
<input class="d-none" type="text" id="reference-name-input">
<input class="d-none" type="text" id="chart-mode">
<div class="d-none">
<input class="d-noneX" id="get-data-button-pressed">
<input class="d-noneX" id="current-update-status">
<input class="d-noneX" type="text" id="show-from-date-time">
<input class="d-noneX" type="text" id="show-to-date-time">
<input class="d-noneX" type="text" id="show-to-date-time-real">
<input class="d-noneX" type="text" id="sec-to-add">
<div id="some-info"></div>
<div id="some-info-1"></div>
<div id="some-info-2"></div>
<input class="d-noneX" id="interval-counter-base">
<input class="d-noneX" id="interval-counter">
<input class="d-noneX" type="text" id="last-date-added-to-table">
<input class="d-noneX" type="text" id="number-of-calls">
<input class="d-noneX" type="text" id="input-timer-value">
<input class="d-noneX" type="text" id="input-loop-value">
Base date
<input class="d-noneX" type="text" id="input-base-date">
<p></p>
<p></p>
time unit
<input class="d-noneX" type="text" id="input-time-unit">
<p></p>
subtract value
<input class="d-noneX" type="text" id="input-subtract-value">
<p></p>
time unit for moving chart
<input class="d-noneX" type="text" id="input-time-unit-move-chart">
<p></p>
How much to move the chart
<input class="d-noneX" type="text" id="input-value-to-move-chart">
<p></p>
Min value (red)
<input class="d-noneX" type="text" id="input-value-min">
<p></p>
Max value (green)
<input class="d-noneX" type="text" id="input-value-max">
<p></p>
</div>
<input class="d-none" type="text" id="input-HUB_SERTYP">
<div class="row">
<div class="col-2">
<img src="images/customer-logo.png" class="img-fluid" alt="Customer Logo">
</div>
<div class="col-8 text-center <?php echo $DFT_CLOCK_SIZE ?>">
<i title="<?php echo $session_rand ?>" class="font-awesome-pseudo-class fa-thin fa-clock"></i> <span id="current-time"><?php echo date('d-m-Y h:i:s') ?></span>
</div>
<div class="col-2 text-right">
<div id="home-button" class="btn btn-primary" onclick="window.close()" title="<?php echo $datahub_go_to_my_dear_home ?>"><i class="font-awesome-pseudo-class fa-2x fa-thin fa-home"></i></div>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<div id="data-hub-company-information"></div>
</div>
</div>
<div class="card border-muted mt-1 mb-2" id="card-result-area">
<div class="card-header text-muted mb-2">
<div class="row mt-2">
<div class="col-4 h4">
<div id="general-header-for-this-screen"><i class="font-awesome-pseudo-class fa-thin fa-anchor"></i> <?php echo "$datahub_text0126"; ?></div>
</div>
<div class="col-4 text-center">
<div id="data-result-button-lines"></div>
<button type="button" id="button-toggle-from-to-date" class="mb-1 btn btn-primary" onclick="toggleFromToDate()"><?php echo $datahub_button_set_from_to_date ?></button>
<div id="current-update-status-wrapper" class="d-none mb-3">
<div class="mb-2" id="current-update-status-text"></div>
<button type="button" class="btn btn-primary" onclick="unPauseUpdate()"><?php echo $datahub_button_unpause_update ?></button>
</div>
</div>
<div class="col-4 text-right">
<div id="hub_count-text"></div>
<div id="response-time-text"></div>
</div>
</div>
</div>
<div id="from-to-date-wrapper" class="d-none mb-2 border border-dark p-2">
<div class="row mb-1">
<div class="col-4">
<div style="font-size: 0.8rem;" class="font-weight-bold"><?php echo "$datahub_text0012 / $datahub_text0155" ?></div>
</div>
<div class="col-4">
<div style="font-size: 0.8rem;" class="font-weight-bold"><?php echo "$datahub_text0013 / $datahub_text0155" ?></div>
</div>
</div>
<div class="row">
<div class="col-2">
<input id="select-from-date" type="date" class="form-control">
</div>
<div class="col-2">
<input id="select-from-time" type="time" class="form-control">
</div>
<div class="col-2">
<input id="select-to-date" type="date" class="form-control">
</div>
<div class="col-2">
<input id="select-to-time" type="time" class="form-control">
</div>
<div class="col-4">
<button type="button" class="btn btn-primary" onclick="getDataLineBurner('1')"><?php echo $datahub_button_get_data_icon ?></button>
<button type="button" class="d-none btn btn-primary" onclick="getDataLineBurner('2')"><?php echo $datahub_button_get_data_icon_export ?></button>
</div>
</div>
<div class="row mb-1">
<div class="col-12">
<div class="font-weight-bold text-left" style="font-size: 1.0rem" id="date-confirm-message"></div>
</div>
</div>
</div>
</div>
<div>
<div class="row">
<div class="col-6 text-left">
<button type="button" class="btn btn-primary" onclick="saveChartToTable()" id="button-export-chart-data"><?php echo $datahub_button_save_data_to_table ?></button>
</div>
<div class="col-6 text-right">
<button class="btn btn-primary d-none" onclick="downloadPDF()" id="downloadPdf">Download PDF</button>
</div>
</div>
<div class="row">
<div class="col mt-2">
<div id="canvas-wrapper-message"></div>
<div id="canvas-wrapper" style="width:100%" class="">
<!--<canvas id="show-chart-here"></canvas>-->
<canvas id="chart_01_id"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="card border-muted mb-2" id="card-result-area-table-1">
<!-- table with sum figures -->
<div class="card-body" id="table-header-data">
</div>
<div class="card border-muted mb-2 d-none" id="card-result-area-table-2">
<div class="d-none" id="sql"></div>
<div class="d-none" id="ent"></div>
<!-- table with detail transactions -->
<div class="card-body">
<div id="data-result-trans"></div>
</div>
</div>
<!-- pseodu empty col -->
<div class="col-2 div-spreder">
</div>
</div>
<!-- ======================================================================================== -->
<!-- Might surface if an ajax call fails -->
<!-- ======================================================================================== -->
<div id="error-text-wrapper" class="d-none">
<div class="border border-danger rounded p-2 bg-light" id="error-text-ajax-call"></div>
</div>
<!-- ======================================================================================== -->
</div>
<!-- Set footer -->
<span id="footer-id">
<?php
include "include/footer.php";
?>
</span>
<!-- Set footer -->
<!-- ========================================================================== -->
<!-- M O D A L S -->
<!-- ========================================================================== -->
<!-- Modal start - data table -->
<div class="modal fade" id="chartDataModal" tabindex="-1" role="dialog" aria-labelledby="chartDataModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xxl" role="document">
<div class="modal-content">
<div class="modal-header text-white bg-primary">
<div class="modal-title h3" id="chartDataModalLabel"></div>
<button type="button" class="d-none close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div onclick="showSearchTip()" title="<?php echo $datahub_text0223 ?>" id="modal-lightbulb"><i class="fa-duotone fa-lightbulb" style="--fa-primary-color: blue; --fa-secondary-color: black; --fa-secondary-opacity: 1.0"></i></div>
</div>
<div class="modal-body">
<div class="overflow-class" class="border border-danger">
<div style="width:99%">
<!-- Search tip => see showSearchTip function -->
<div id="modal-search-tip" class="d-none border border-primary p-2 rounded mb-3">
<div><small id="msg_datahub_text0314"></small></div>
<div><small id="msg_datahub_text0315"></small></div>
<div><small id="msg_datahub_text0316"></small></div>
</div>
<table id="REEFTvisual_chart_data" width="100%" class="table table-bordered table-striped table-hover">
<thead>
<tr class="bg-primary text-white">
<th><?php echo $datahub_text0140 ?></th>
<th><?php echo $datahub_text0145 ?></th>
<th><?php echo "$datahub_text0153 $datahub_text0154" ?></th>
<th><?php echo $datahub_text0222 ?></th>
<th><?php echo $datahub_text0177 ?></th>
<th><?php echo $datahub_text0128 ?></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<footer>
<div class="container-fluid mb-2">
<div class="row mt-1">
<div class="col text-left">
<button type="button" class="btn btn-primary" data-dismiss="modal"><?php echo $datahub_button_cancel ?></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal end -->
</body>
</html>